<template>
  <div class="editor-page">
  <div class="container page">
    <div class="row">

      <div class="col-md-10 offset-md-1 col-xs-12">
        <form>
          <fieldset>
            <fieldset class="form-group">
                <input type="text" class="form-control form-control-lg" placeholder="Article Title" v-model="article.title">
            </fieldset>
            <fieldset class="form-group">
                <input type="text" class="form-control" placeholder="What's this article about?" v-model="article.description">
            </fieldset>
            <fieldset class="form-group">
                <textarea class="form-control" rows="8" placeholder="Write your article (in markdown)" v-model="article.body"></textarea>
            </fieldset>
            <fieldset class="form-group">
                <input type="text" class="form-control" placeholder="Enter tags" @keydown.enter="addTag" v-model.trim="tag"><div class="tag-list"></div>

                <div class="tag-list" v-show="article.tagList.length > 0">
                  <span class="tag-default tag-pill ng-binding ng-scope" v-for="(tag, index) in article.tagList" :key="index">
                    <i class="ion-close-round" @click="deleteTag(index)"></i>
                    {{tag}}
                  </span>
              </div>
            </fieldset>
            <button class="btn btn-lg pull-xs-right btn-primary" type="button" @click.prevent="createArticle">
                Publish Article
            </button>
          </fieldset>
        </form>
      </div>

    </div>
  </div>
</div>
</template>

<script>
import {reqAddArticle} from '../../api/article'
export default {
  name:'',
  data () {
    return {
       article:{
         title:'',
         description: '',
         body: '',
         tagList: []
       },
       tag: ''
    };
  },
  methods: {
    // 创建文章
    async createArticle(){
      if(!this.article.title || !this.article.description || !this.article.body){
        return alert('No title or description or details')
      }
      const result = await reqAddArticle(this.article)
      
      this.$router.push('/article/' + result.article.slug)
    },

    // 添加tag标签
    addTag(){
      if(this.tag){
        this.article.tagList.push(this.tag)
        this.tag = ''
      }
    },

    // 移除tag标签
    deleteTag(index){
      this.article.tagList.splice(index, 1)
    }
  }
}

</script>
<style lang='less' scoped>
.editor-page{
  div.tag-list{
    margin-top: 6px;
    span{
      margin-right: 6px;
    }
  }
}
</style>